<template>
	<div>
		<cityHeader></cityHeader>
		<citySearch :cities="cities"></citySearch>
		<cityList :cities="cities" :hotCities="hotCities" :letter="letter"></cityList>
		<cityAlphabet :cities="cities" @change="handleLetterChange"></cityAlphabet>
	</div>
</template>

<script>
import cityHeader from "./components/Header.vue"
import citySearch from "./components/Search.vue"
import cityList from "./components/List.vue"
import cityAlphabet from "./components/Alphabet.vue"

import axios from "axios"
	export default{
		name :"City",
		components:{
			cityHeader,
			citySearch,
			cityList,
			cityAlphabet
		},
		data(){
			return{
				cities:{},
				hotCities:[],
				letter:""
			}
		},
		methods:{
			getCityInfo(){
				axios.get('/api/city.json').then((res)=>{
					if(res.data.ret&&res.data.data){
						this.cities=res.data.data.cities
						this.hotCities=res.data.data.hotCities
					}

				})
			},
			handleLetterChange(letter){
				this.letter=letter
			}
		},
		mounted(){
			this.getCityInfo()	
		}
	}
</script>

<style lang="stylus" scoped>
	
</style>